<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8f9fa;
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            color: #333;
        }

        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
            font-weight: 600;
            color: #2c3e50;
        }

        .actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-weight: 500;
            transition: background-color 0.2s ease;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }

        .btn:hover {
            background: #0056b3;
        }

        .back-button {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(255,255,255,0.2);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .back-button:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }

        .stats-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .stats-card:hover {
            transform: translateY(-5px);
        }

        .stats-card h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.5rem;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 10px;
        }

        .stat-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .stat-item:last-child {
            border-bottom: none;
        }

        .stat-label {
            font-weight: 500;
            color: #666;
        }

        .stat-value {
            font-weight: 600;
            color: #333;
            font-size: 1.1rem;
        }

        .records-container {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .records-container h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.5rem;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 10px;
        }

        .records-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
        }

        .record-item {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 15px;
            border-left: 4px solid #667eea;
            transition: all 0.3s ease;
        }

        .record-item:hover {
            background: #e9ecef;
            transform: translateX(5px);
        }

        .record-title {
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
            font-size: 1rem;
        }

        .record-url {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 10px;
            word-break: break-all;
        }

        .record-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
        }

        .visit-count {
            background: #667eea;
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-weight: 600;
        }

        .visit-times {
            color: #666;
        }

        .first-visit, .last-visit {
            display: block;
            margin: 2px 0;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
            font-size: 1.1rem;
        }

        .empty-records {
            text-align: center;
            padding: 40px;
            color: #999;
            font-style: italic;
        }

        .refresh-button {
            background: #667eea;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }

        .refresh-button:hover {
            background: #5a6fd8;
            transform: translateY(-2px);
        }

        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .records-grid {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <a href="/" class="back-button">← 返回导航</a>
    
    <div class="container">
        <header>
            <h1>📊 浏览数据统计</h1>
        </header>

        <!-- 操作按钮 -->
        <div class="actions">
            <a href="/" class="btn">🏠 返回首页</a>
            <a href="/import" class="btn">导入浏览器数据</a>
            <a href="/test-extension" class="btn">🧪 扩展测试</a>
            <a href="/ai-grouping" class="btn">🤖 AI智能分组</a>
        </div>

        <button class="refresh-button" onclick="refreshData()">🔄 刷新数据</button>

        <div class="stats-grid">
            <div class="stats-card">
                <h2>📈 浏览统计</h2>
                <div id="statsContainer">
                    <div class="loading">正在加载统计数据...</div>
                </div>
            </div>

            <div class="stats-card">
                <h2>🌐 域名统计</h2>
                <div id="domainStatsContainer">
                    <div class="loading">正在加载域名统计...</div>
                </div>
            </div>
        </div>

        <div class="records-container">
            <h2>📋 浏览记录详情</h2>
            <div id="recordsContainer">
                <div class="loading">正在加载浏览记录...</div>
            </div>
        </div>
    </div>

    <script>
        // 页面加载时获取数据
        document.addEventListener('DOMContentLoaded', function() {
            loadStats();
            loadRecords();
        });

        // 加载统计数据
        async function loadStats() {
            try {
                const response = await fetch('/api/browsing-stats');
                const result = await response.json();
                
                if (result.code === 200) {
                    renderStats(result.data);
                } else {
                    document.getElementById('statsContainer').innerHTML = 
                        '<div class="loading">加载统计数据失败: ' + result.message + '</div>';
                }
            } catch (error) {
                document.getElementById('statsContainer').innerHTML = 
                    '<div class="loading">加载统计数据失败: ' + error.message + '</div>';
            }
        }

        // 渲染统计数据
        function renderStats(stats) {
            const container = document.getElementById('statsContainer');
            container.innerHTML = `
                <div class="stat-item">
                    <span class="stat-label">总访问次数</span>
                    <span class="stat-value">${stats.totalVisits || 0}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">今日访问</span>
                    <span class="stat-value">${stats.todayVisits || 0}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">访问站点数</span>
                    <span class="stat-value">${stats.uniqueSites || 0}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">最常访问</span>
                    <span class="stat-value">${stats.mostVisitedSite || '无'}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">喜爱域名</span>
                    <span class="stat-value">${stats.favoriteDomain || '无'}</span>
                </div>
            `;
        }

        // 加载浏览记录
        async function loadRecords() {
            try {
                const response = await fetch('/api/browsing-records');
                const result = await response.json();
                
                if (result.code === 200) {
                    renderRecords(result.data);
                    renderDomainStats(result.data);
                } else {
                    document.getElementById('recordsContainer').innerHTML = 
                        '<div class="loading">加载浏览记录失败: ' + result.message + '</div>';
                }
            } catch (error) {
                document.getElementById('recordsContainer').innerHTML = 
                    '<div class="loading">加载浏览记录失败: ' + error.message + '</div>';
            }
        }

        // 渲染浏览记录
        function renderRecords(records) {
            const container = document.getElementById('recordsContainer');
            
            if (!records || records.length === 0) {
                container.innerHTML = '<div class="empty-records">暂无浏览记录</div>';
                return;
            }

            const recordsHTML = records.map(record => `
                <div class="record-item">
                    <div class="record-title">${record.title || '无标题'}</div>
                    <div class="record-url">${record.url}</div>
                    <div class="record-stats">
                        <span class="visit-count">访问 ${record.visitCount} 次</span>
                        <div class="visit-times">
                            <div class="first-visit">首次: ${formatVisitTime(record.firstVisit)}</div>
                            <div class="last-visit">最近: ${formatVisitTime(record.lastVisit)}</div>
                        </div>
                    </div>
                </div>
            `).join('');

            container.innerHTML = `<div class="records-grid">${recordsHTML}</div>`;
        }

        // 渲染域名统计
        function renderDomainStats(records) {
            const domainStats = {};
            records.forEach(record => {
                const domain = record.domain || '未知域名';
                if (!domainStats[domain]) {
                    domainStats[domain] = { count: 0, visits: 0 };
                }
                domainStats[domain].count += 1;
                domainStats[domain].visits += record.visitCount;
            });

            const sortedDomains = Object.entries(domainStats)
                .sort((a, b) => b[1].visits - a[1].visits)
                .slice(0, 5); // 只显示前5个

            const container = document.getElementById('domainStatsContainer');
            if (sortedDomains.length === 0) {
                container.innerHTML = '<div class="loading">暂无域名数据</div>';
                return;
            }

            const domainHTML = sortedDomains.map(([domain, stats]) => `
                <div class="stat-item">
                    <span class="stat-label">${domain}</span>
                    <span class="stat-value">${stats.visits} 次访问</span>
                </div>
            `).join('');

            container.innerHTML = domainHTML;
        }

        // 格式化访问时间
        function formatVisitTime(visitTime) {
            if (!visitTime) return '未知';
            
            const now = new Date();
            const visit = new Date(visitTime);
            const diffMs = now - visit;
            const diffMins = Math.floor(diffMs / 60000);
            const diffHours = Math.floor(diffMins / 60);
            const diffDays = Math.floor(diffHours / 24);

            if (diffMins < 1) return '刚刚';
            if (diffMins < 60) return `${diffMins}分钟前`;
            if (diffHours < 24) return `${diffHours}小时前`;
            if (diffDays < 7) return `${diffDays}天前`;
            
            return visit.toLocaleDateString('zh-CN');
        }

        // 刷新数据
        function refreshData() {
            document.getElementById('statsContainer').innerHTML = 
                '<div class="loading">正在刷新统计数据...</div>';
            document.getElementById('recordsContainer').innerHTML = 
                '<div class="loading">正在刷新浏览记录...</div>';
            document.getElementById('domainStatsContainer').innerHTML = 
                '<div class="loading">正在刷新域名统计...</div>';
            
            loadStats();
            loadRecords();
        }
    </script>
</body>
</html>
